import { View, Button, Text, Image, ScrollView, Radio } from '@tarojs/components';
import Taro from '@tarojs/taro';
import React, { Component } from 'react';
import * as T from '../types';
import './taskProcess.less';
import actions from '../actions/index';
import { connect } from 'react-redux';
import { store2Props } from '../selectors';
import prizeBoxImage from '@/assets/image/index/prizeBox.png';
type ITopProps = T.IProps & T.ITopProps;
//@ts-ignore
@connect<Partial<ITopProps>, T.ITopState>(store2Props, actions)
export default class Info extends Component<Partial<ITopProps>, T.ITopState> {
  constructor(props: ITopProps) {
    super(props);
    this.state = {};
  }

  render() {
    let {
      actions: { action },
      main: { process, processText, taskList },
    } = this.props;
    return (
      <View className="taskProcess">
        <Text className="taskProcess-text">做任务赚奖励</Text>
        {taskList.length > 0 && (
          <View className="taskProcessBarBox">
            <View style={{ width: `${process}%` }} className="taskProcessBar">
              {processText}%
            </View>
            <View style={{ left: `${process}%` }} className='taskProcessBar-round'></View>
            <Image src={prizeBoxImage} className="taskProcess-prizeBoxImage" />
          </View>
        )}
      </View>
    );
  }
}
